<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {height: 2000px;}
	#div1 { width: 100px; height: 200px; background-color: red;position: absolute;right: 0;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var _pos = ( document.documentElement.clientHeight - oDiv.offsetHeight )/2;		//注意并不是oDiv.style.top，而是自身高度offsetHeight

		//初始化
		oDiv.style.top = _pos + 'px';

		window.onscroll = function (){
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var posTop = scrollTop + _pos;
			posTop = parseInt( posTop );		//posTop本身很有可能是带有小数的（带有0.5），这会导致div到达终点的后因满足不了值而抖动

			doMove( oDiv, posTop );
		}
	}

	function doMove( obj, target, endFn ){
		clearInterval( obj.timer );

		obj.timer = setInterval(function (){
			var speed = ( target - obj.offsetTop )/12;
			speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
 
			var nextPos = obj.offsetTop + speed;

			if ( nextPos > target && speed > 0 || nextPos < target && speed < 0 ) {
				nextPos = target;
			};

			obj.style.top = nextPos + 'px';

			if ( nextPos == target ) {
				clearInterval( obj.timer );
				endFn && endFn();
			};
	},30)
}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>